<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2023/9/27
  Time: 15:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <style>
        .aaa {
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <form class="hh-form">
        <div class="form-item">
            <input type="text" name="name" value="${name}" placeholder="管理员名称" class="hh-input">
            <input type="button" class="hh-bt hh-bt-primary hh-bt-search" value="查询">
            <input type="button" class="hh-bt hh-bt-reset" value="重置">
        </div>
    </form>
    <div>
        <input type="button" value="添加" class="hh-bt hh-bt-primary hh-bt-add">
        <input type="button" value="批量删除" class="hh-bt hh-bt-danger hh-bt-delete batchDelete">

    </div>
<table class="hh-table">
    <tr class="hh-table-tr">
        <th><input type="checkbox" class="ck"></th>
        <th>id</th>
        <th>管理员名称</th>
        <th>管理员密码</th>
        <th>管理员头像</th>
        <th class="hh-table-th-option">操作</th>
    </tr>
    <c:forEach items="${page.list}" var="admin">
        <tr class="hh-table-tr">
            <td><input type="checkbox" class="ck"></td>
            <td>${admin.id}</td>
            <td>${admin.name}</td>
            <td>${admin.pwd}</td>
            <td>
                <c:if test="${admin.img!=null && admin.img !=''}">
                    <img src="/file/show?name=${admin.img}" alt="">
                </c:if>
                <c:if test="${admin.img==null || admin.img ==''}">
                    <img src="/static/image/admin/login-title.jpg" alt="">
                </c:if>
            </td>
            <td>
                <input type="button" value="修改" class="hh-bt hh-bt-warning hh-bt-edit">
                <input type="button" value="删除" class="hh-bt hh-bt-danger hh-bt-delete delete">
            </td>
        </tr>
    </c:forEach>
</table>
<div id="page"></div>
</body>
</html>
<script>
    new Pagination({
        element: '#page', // 元素
        type: 1, // 样式类型，可选[1,2]
        pageIndex: ${page.page}, // 初始页码
        pageSize: ${page.size}, // 每页数量
        pageCount: ${page.pageCount}, // 页码数量
        total: ${page.count}, // 数据总条数
        jumper: true, // 显示输入框跳转
        singlePageHide: false, // 只有一页时不显示分页
        prevText: '上一页', // 上一页文字
        nextText: '下一页', // 下一页文字
        disabled: true, // 是否显示禁用
        currentChange: function (index) {
            let name = $('[name="name"]').val();
            $(".right-body").load("/admin/page?page=" + index+"&name="+name);
        }
    });

    $(function () {
        //查询点击事件
        $(".hh-bt-search").click(function () {
            let name = $('[name="name"]').val();
            $(".right-body").load("/admin/page?name="+name);
        })

        //重置按钮点击事件
        $(".hh-bt-reset").click(function () {
            $(".right-body").load("/admin/page");
        })

        //添加按钮点击事件
        $(".hh-bt-add").click(function () {
            layer.open({
                type: 2,
                title: '添加管理员',
                shadeClose: false,
                shade: 0.8,
                area: ['800px', '600px'],
                content: '/admin/view/admin/add'
            });
        })


        //删除按钮点击事件
        $(".delete").click(function () {
            let id = $(this).parent().parent().find("td:eq(1)").text();

            layer.confirm('确定要删除该数据吗？', {icon: 3, title:'提示'}, function(index){
                //执行删除
                $.post('/admin/delete?id='+id, function (e) {
                    if(e.result){
                        parent.layer.msg(e.message, {icon: 1});
                        $(".right-body", parent.document).load("/admin/page");
                    }else{
                        parent.layer.msg(e.message, {icon: 2});
                    }
                })
            });
        })

        // 全选
        $(".ck:eq(0)").click(function () {
            if ($(this).prop("checked")){
                $(".ck").prop("checked",true);
            }else {
                $(".ck").prop("checked",false);
            }
        })
        // 全选与取消全选
        $(".ck:not(:first)").click(function () {
            if (!$(this).prop("checked")){
                $(".ck:eq(0)").prop("checked",false);
            }else {
                $(".ck:eq(0)").prop("checked",true);
                $(".ck:not(:first)").each(function (index,e) {
                    // e:循环出来的每个复选框
                    if (!$(e).prop("checked")){
                        $(".ck:eq(0)").prop("checked",false);
                        return;
                    }
                })
            }
        })

        // 批量删除
        $(".batchDelete").click(function () {
            if ($(".ck:checked").length == 0){
                layer.msg("至少选中一行数据", {icon: 2});
                return;
            }

            layer.confirm('确定要删除该数据吗？', {icon: 3, title:'提示'}, function(index){
                let ids = [];
                // 遍历所有选中的复选框
                $(".ck:not(:first):checked").each(function (index,e) {
                    let id = $(e).parent().next().text();
                    ids.push(id);
                })

                // ajax删除
                $.post('/admin/batchDelete',{ids:JSON.stringify(ids)},function (e) {
                    if(e.result){
                        parent.layer.msg(e.message, {icon: 1});
                        $(".right-body", parent.document).load("/admin/page");
                    }else{
                        parent.layer.msg(e.message, {icon: 2});
                    }
                })
            })
        })

        //修改按钮点击事件
        $(".hh-bt-edit").click(function () {
            let id = $(this).parent().parent().find("td:eq(1)").text();
            layer.open({
                type: 2,
                title: '修改管理员',
                shadeClose: false,
                shade: 0.8,
                area: ['800px', '600px'],
                content: '/admin/updatePage?id='+id
            });
        })
    })
</script>
